<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>

<body class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6 text-center">设置</h1>
        <div class="grid grid-cols-4 gap-4">
            <div>
                <label for="customerPartNumberStart" class="block mb-1">客户零件号起始位:</label>
                <input type="number" id="customerPartNumberStart" class="border border-gray-300 p-2 w-full" placeholder="客户零件号起始位">
            </div>
            <div>
                <label for="customerPartNumberEnd" class="block mb-1">客户零件号结束位:</label>
                <input type="number" id="customerPartNumberEnd" class="border border-gray-300 p-2 w-full" placeholder="客户零件号结束位">
            </div>
            <div>
                <label for="factoryPartNumberStart" class="block mb-1">厂内零件号起始位:</label>
                <input type="number" id="factoryPartNumberStart" class="border border-gray-300 p-2 w-full" placeholder="厂内零件号起始位">
            </div>
            <div>
                <label for="factoryPartNumberEnd" class="block mb-1">厂内零件号结束位:</label>
                <input type="number" id="factoryPartNumberEnd" class="border border-gray-300 p-2 w-full" placeholder="厂内零件号结束位">
            </div>
            <div>
                <label for="batchNumberStart" class="block mb-1">批次号起始位:</label>
                <input type="number" id="batchNumberStart" class="border border-gray-300 p-2 w-full" placeholder="批次号起始位">
            </div>
            <div>
                <label for="batchNumberEnd" class="block mb-1">批次号结束位:</label>
                <input type="number" id="batchNumberEnd" class="border border-gray-300 p-2 w-full" placeholder="批次号结束位">
            </div>
            <div>
                <label for="quantityStart" class="block mb-1">数量起始位:</label>
                <input type="number" id="quantityStart" class="border border-gray-300 p-2 w-full" placeholder="数量起始位">
            </div>
            <div>
                <label for="quantityEnd" class="block mb-1">数量结束位:</label>
                <input type="number" id="quantityEnd" class="border border-gray-300 p-2 w-full" placeholder="数量结束位">
            </div>
        </div>
        <button id="saveSettings" class="bg-blue-500 text-white p-2 rounded w-full mt-4">保存设置</button>
    </div>
    <script>
        async function loadSettings() {
            try {
                const response = await fetch('/settings');
                const settings = await response.json();
                const extraction = settings.extraction;
                document.getElementById('customerPartNumberStart').value = extraction.customerPartNumber[0];
                document.getElementById('customerPartNumberEnd').value = extraction.customerPartNumber[1];
                document.getElementById('factoryPartNumberStart').value = extraction.factoryPartNumber[0];
                document.getElementById('factoryPartNumberEnd').value = extraction.factoryPartNumber[1];
                document.getElementById('batchNumberStart').value = extraction.batchNumber[0];
                document.getElementById('batchNumberEnd').value = extraction.batchNumber[1];
                document.getElementById('quantityStart').value = extraction.quantity[0];
                document.getElementById('quantityEnd').value = extraction.quantity[1];
            } catch (error) {
                console.error('加载设置时出错:', error);
            }
        }

        const saveSettingsButton = document.getElementById('saveSettings');
        saveSettingsButton.addEventListener('click', async () => {
            const settings = {
                extraction: {
                    customerPartNumber: [
                        parseInt(document.getElementById('customerPartNumberStart').value),
                        parseInt(document.getElementById('customerPartNumberEnd').value)
                    ],
                    factoryPartNumber: [
                        parseInt(document.getElementById('factoryPartNumberStart').value),
                        parseInt(document.getElementById('factoryPartNumberEnd').value)
                    ],
                    batchNumber: [
                        parseInt(document.getElementById('batchNumberStart').value),
                        parseInt(document.getElementById('batchNumberEnd').value)
                    ],
                    quantity: [
                        parseInt(document.getElementById('quantityStart').value),
                        parseInt(document.getElementById('quantityEnd').value)
                    ]
                }
            };
            try {
                const response = await fetch('/settings', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(settings)
                });
                if (response.ok) {
                    alert('设置保存成功');
                } else {
                    const errorText = await response.text();
                    alert(`设置保存失败: ${errorText}`);
                }
            } catch (error) {
                console.error('网络错误:', error);
                alert(`网络错误: ${error.message}`);
            }
        });

        loadSettings();
    </script>
</body>

</html>    